<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据采集</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片导航 -->
    <!-- 已上传数据表列表部分 -->
    <div style="height: 300px; width: 300px; overflow-y: auto">
      <el-table :data="tableListDate" stripe style="width: 150%">
        <el-table-column prop="name" label="已上传数据表" width="200"></el-table-column>
        <el-table-column  label="" width="100">
          <template v-slot="scope">
        <el-button v-model="scope.row.name"  @click="handleClick(scope.row.name)" type="text" size="small">查看</el-button>
          </template>
    </el-table-column>
      </el-table>
    </div>
    <!-- 右侧数据库中的数据表格 -->
    <div class="content">
      <!-- 已上传的数据表 -->
        <!-- <el-table-column
          v-for="(items, index) in tableDataType"
          :key="index"
          :prop="items.pinyin"
          :label="items.pinyin"
          width="180"
        >
        </el-table-column> -->
        <!-- 指标列表 -->
      <el-table :data="tableData" stripe style="width: 100%" border>
        <el-table-column prop="ZHI_BIAO_BIAN_HAO" label="指标编号"></el-table-column>
        <el-table-column prop="ZHI_BIAO_MING_CHENG" label="指标名"></el-table-column>
        <el-table-column prop="ZHI_BIAO_SHUO_MING" label="说明"></el-table-column>
        <el-table-column prop="ZHI_BIAO_HAN_YI" label="含义"></el-table-column>
        <el-table-column prop="FEN_ZHI" label="权重"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        @size-change="handleSizeChange"
        :page-size="queryInfo.pagesize"
        :page-sizes="[5, 6]"
        :total="userData.total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <!-- 插入分页器，调整每页显示的条数 -->
      <div></div>
    </div>
    <!-- 数据采集实现按钮 -->
    <div class="get_data">
      <el-upload
        :action="uploadFileUrl"
        :before-upload="handleBeforeUpload"
        :file-list="fileList"
        :on-error="handleUploadError"
        :on-success="handleUploadSuccess"
        :show-file-list="false"
        :headers="headers"
        class="upload-file-uploader"
        ref="upload"
      >
        <el-button size="small" type="primary" class="gets">导入</el-button>
      </el-upload>
      <el-button class="gets">调用摄像头</el-button>
      <el-button class="gets">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {

    params: {
      limit: 3,
      pages: 3
    },
    // 值
    value: [String, Object, Array],
    // 数量限制
    limit: {
      type: Number,
      default: 5
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ['xls']
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      uploadFileUrl: 'http://192.168.31.67:8080/renren-fast/excel/dealFromFile', // 上传的图片服务器地址
      headers: {
        token: window.sessionStorage.getItem('token')
      },
      tableData: [],
      tableDataType: [],
      fileList: [],
      queryInfo: {
        // 搜索值
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每次显示多少条数据
        pagesize: 5
      },
      userData: {
        userList: [],
        total: 0
      },
      tableListDate: []
    }
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize)
    }
  },
  created() {
    this.getTabelList()
  },
  methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = ''
        if (file.name.lastIndexOf('.') > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
          this.fileList.push(file.name)
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true
          if (fileExtension && fileExtension.indexOf(type) > -1) return true
          return false
        })
        if (!isTypeOk) {
          this.$message.error(
            `文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`
          )
          return false
        }
      }
    },
    // 上传失败
    handleUploadError() {
      this.$message.error('上传失败, 请重试')
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      this.$message.success('上传成功!')
      this.tableDataType = res[res.length - 1]
      this.tableData = res
      this.getTabelList() // 刷新已上传数据表列表
    },
    // 获取已上传数据表名单
    async getTabelList() {
      const { data: res } = await this.$http.get('/index/find')
      if (res.code !== 0) {
        this.$message.error('获取上传文件列表失败!')
      }
      this.tableListDate = res
      console.log(this.tableListDate)
      this.$message.success('获取上传文件列表成功!')
    },
    // 根据数据表名查看数据
    async handleClick(name) {
      const { data: res } = await this.$http.get('/index/findByTableName?name=' + name)
      console.log(res)
      if (res.code !== 401) {
        this.$message.success('查看成功!')
        this.tableDataType = res
        this.tableData = res[res.length - 1]
        console.log(tableDataType)
        console.log(tableData)
      } else { this.$message.error('查看指标列表失败!') }
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 10%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 80%;
}
.show {
  position: absolute;
  width: 20%;
  height: 180px;
  background-color: rgb(235, 78, 78);
  background-image: #4b6b2b;
  background-size: cover;
  bottom: 20px;
  left: 17%;
}
.content {
  position: absolute;
  width: 50%;
  height: 70%;
  top: 18%;
  left: 45%;
}
.get_data {
  position: absolute;
  bottom: 0;
  left: 65%;
}
.pages {
  position: absolute;
  right: 230px;
  bottom: 50px;
}
.upload-file-uploader {
  position: absolute;
  bottom: 0;
  left: -40%;
}
</style>
